<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>display</title>

    <style>

        div{

        }

        a{

            width: 17px;

            height: 20px;

            border: 1px solid #e0e1e2;

            display: inline-block;

            text-align: center;

            line-height: 20px;

            text-decoration: none;

            font-size: 12px;

        }

        .pagebutton{

            width: 64px;
        }

        a:hover,.active{

            background-color: blue;

            color: white;
        }
    </style>
</head>
<body>

<div>块元素</div>

<div class="pageBox">

    <a class="pagebutton" href="#">上一页</a>
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#" class="active">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
    <a class="pagebutton" href="#">下一页</a>
</div>

</body>
</html>